<template>
  <div class="content">
    <div class="cartList__content__box" ref="cartListBox">
      <h2 class="cartList__content__box__title" ref="shopNames">
        {{ shopName }}
      </h2>
      <div class="products__wrapper">
        <div class="products__wrapper__cartList" ref="products">
          <div
            class="cartList__content__box__product"
            v-for="item in productsList"
            :key="item._id"
          >
            <img
              :src="item.imgUrl"
              class="cartList__content__box__product__pic"
              alt=""
            />
            <div class="cartList__content__box__product__con">
              <span class="cartList__content__box__product__info">{{
                item.name
              }}</span>
              <p class="cartList__content__box__product__price">
                <span class="product__unitprice"
                  ><em>&yen;</em
                  ><i>{{ item.price }} x {{ item.count }}</i></span
                >
                <span class="product__totalprice"
                  ><em>&yen;</em
                  ><i>{{ (item.price * item.count).toFixed(2) }}</i></span
                >
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="cartList__content__box__total">
          <p class="cartList__content__box__total__info">
            共计3件/1.4kg<span class="icon iconfont">&#xe8a4;</span>
          </p>
        </div> -->
    </div>
  </div>
</template>

<script>
import { useRoute } from "vue-router";
import { usecommonCartEffect } from "../../effects/cartEffects";
import { ref, onMounted } from "vue";
export default {
  name: "CartList",
  setup() {
    const route = useRoute();
    const shopId = route.params.id;
    const { shopName, productsList } = usecommonCartEffect(shopId);
    const cartListBox = ref(null);
    const shopNames = ref(null);
    const products = ref(null);
    onMounted(() => {
      cartListBox.value.style.height = 60 + shopNames.value.offsetHeight + products.value.offsetHeight + "px";
    });
    return {
      shopName,
      productsList,
      cartListBox,
      shopNames,
      products,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.content {
  margin-top: 0.16rem;
  .cartList__content__box {
    padding: 0.16rem;
    border-radius: 0.04rem;
    background-color: $content-fzcolor;
    .products__wrapper {
      position: absolute;
      top: 2.6rem;
      left: 0.18rem;
      right: 0.18rem;
      bottom: 0.65rem;
      padding-left: 0.16rem;
      padding-right: 0.16rem;
      overflow-y: scroll;
      &__cartList {
        background-color: $content-fzcolor;
      }
    }
    &__title {
      font-size: 0.16rem;
      color: $content-fontcolor;
    }
    &__product {
      display: flex;
      padding-bottom: 0.16rem;
      &__pic {
        width: 14.984%;
        margin-right: 0.16rem;
      }
      &__con {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      &__info {
        font-size: 0.14rem;
        color: $content-fontcolor;
      }
      &__price {
        display: flex;
        justify-content: space-between;
        span {
          font-size: 0.14rem;
        }
        .product__unitprice {
          color: #e93b3b;
        }
        .product__totalprice {
          color: #000;
        }
        em {
          font-size: 0.1rem;
        }
      }
    }
    &__total {
      background-color: #f5f5f5;
      &__info {
        font-size: 0.14rem;
        color: #999999;
        line-height: 0.28rem;
        text-align: center;
        .icon {
          font-size: 0.24rem;
          vertical-align: middle;
          margin-left: 0.04rem;
        }
      }
    }
  }
}
</style>